<template>
	<view class="detail">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left">
				<view class="back">
					<image src="../../static/image/register/back.webp" @click="backGo"></image>
				</view>
			</view>
			<view class="header-right">
				<view class="text">
					<image src="../../static/image/detail/more.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 背景图片 -->
		<view class="bg">
			<view class="bg-top"></view>
			<image src="../../static/image/test-img/boom.jpg" mode="aspectFill"></image>
		</view>
		
		<!-- 主体 -->
		<view class="detail-content">
			<!-- 用户头像 -->
			<view class="detail-portrait">
				<image src="../../static/image/test-img/boom.jpg"></image>
				<view class="sex">
					<image src="../../static/image/detail/female.png" v-show="isFemale"></image>
					<image src="../../static/image/detail/male.jpg" v-show="!isFemale"></image>
				</view>
			</view>
			<!-- 用户姓名备注 -->
			<view class="User-name-remarks">左左左表妹</view>
			<!-- 用户姓名 -->
			<view class="User-name">昵称：很好搭档</view>
			<!-- 用户文案 -->
			<view class="user-text">夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。</view>
		</view>
		
		<!-- 结尾 -->
		<view class="end" @click="addfriend">加好友</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFemale:true
			}
		},
		methods: {
			backGo(){
				uni.navigateBack({
					delta:1
				})
			},
			addfriend(){
				uni.navigateTo({
					url:"../request/request"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.bg{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		.bg-top{
			width: 100%;
			height: 100%;
		}
		image{
			position: absolute;
			left: -40rpx;
			top: -40rpx;
			width: 110%;
			height: 110%;
			filter: blur(16px);
			opacity: 0.4;
			z-index: -1;
		}
	}
	
	.header{
		z-index: 100;
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		background: #ffffff;
		// border-bottom: 2rpx solid rgba(39,40,50,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;	
		margin-bottom: 60rpx;
		.header-left{
			line-height: 88rpx;
			.back{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 24rpx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.header-right{
			.text{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 32rpx;
				image{
					width: 52rpx;
					height: 12rpx;
				}
			}
		}
	}
	
	.detail-content{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 0 100rpx;
		.detail-portrait{
			position: relative;
			image{
				width: 400rpx;
				height: 400rpx;
				border: 6rpx solid #FFFFFF;
				border-radius: 48rpx;
			}
			.sex{
				position: absolute;
				left: 320rpx;
				top: 320rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 56rpx;
				background: #FF5D5B;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					border-radius: 28rpx;
					border-color: #FF5D5B;
				}
			}
		}
		.User-name-remarks{
			margin-top: 48rpx;
			font-family: PingFangSC-Regular;
			font-size: 52rpx;
			color: #272832;
			letter-spacing: -1.78rpx;
			font-weight: 400;
		}
		.User-name{
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #272832;
			letter-spacing: -0.96rpx;
			font-weight: 400;
		}
		.user-text{
			margin-top: 20rpx;
			font-family: PingFangSC-Light;
			font-size: 28rpx;
			color: #272832;
			letter-spacing: -0.96rpx;
			line-height: 48rpx;
			font-weight: 200;
		}
	}
	
	.end{
		position: absolute;
		right: 0;
		left: 0;
		bottom: 8rpx;
		margin: 32rpx auto;
		width: 684rpx;
		height: 80rpx;
		background: #FFE431;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
